<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        border: 1px black solid;
      }
    </style>
  </head>
  <body>
    <img class="icon" src="./imgs/dog.gif" alt="" />

    <!--  style="background-color: ;" -->
    <div class="box"></div>

    <input type="text" />

    <script>
      const icon = document.querySelector(".icon");
      // 参数 1 事件的类型，没有提示 硬写
      // 参数 2 【不能】写箭头函数，否则 this 指向就是当前作用域的 this
      // 不用箭头函数--》普通函数，this 就是当前这个 dom 元素
      icon.addEventListener("click", function () {
        // console.log(this)
        this.src = "./imgs/cat.webp";
      });

      const box = document.querySelector(".box");
      box.addEventListener("mouseenter", function () {
        console.log("enter");
        // background-color 改为驼峰命名
        this.style.backgroundColor = "pink";
      });
      box.addEventListener("mouseleave", function () {
        console.log("leave");
        this.style.backgroundColor = "white";
      });

      // 用标签名获取元素 能够有代码提示
      const ipt = document.querySelector("input");
      // 键盘按下，再弹起时触发
      // 【事件参数】 事件触发时，会传递参数给我们，可以获取并使用
      // 按下回车之后，去查询内容
      ipt.addEventListener("keyup", function (e) {
        console.log("键盘弹起");
        console.log(e.key);
        if (e.key == "Enter") {
          console.log("去查询数据");
        }
      });
    </script>
  </body>
</html>
